<template>
  <div style="padding: 8px">
    <el-row :gutter="0">
      <div class="l-rblock">
        <div class="border pd-16">
          <div class="ptitle">
            {{ $t("供应商评估报告") }}
          </div>
          <div class="mt-16">
            <div>
              <div class="learun-form-title">{{ $t("基本信息") }}</div>
              <div class="form_block flex flex-center flex-c-between">
                <div>
                  {{ $t("供应商编号：" + supplierInfo.f_Number) }}
                </div>
                <div>
                  {{ $t("供应商名称：" + supplierInfo.f_Name) }}
                </div>
                <div>
                  {{ $t("供应商负责人：" + supplierInfo.f_Person) }}
                </div>
                <div>
                  {{ $t("供应商类型：" + supplierInfo.f_Type) }}
                </div>
                <div>
                  {{ $t("添加人：" + supplierInfo.f_CreateUserName) }}
                </div>
                <div>
                  {{ $t("创建日期：" + supplierInfo.f_CreateDate) }}
                </div>
                <div>
                  {{ $t("经营范围：" + supplierInfo.f_Scope) }}
                </div>
                <div>
                  {{ $t("手机号：" + supplierInfo.f_Phone) }}
                </div>
              </div>

              <!-- 评估查看 -->
              <assess-form
                v-if="supplier_form"
                :isReadOnly="true"
                :id="id"
                type="0"
              />

              <div class="flex flex-c-center mt-16">
                <el-button
                  plain
                  @click="showLookForm"
                  :icon="
                    supplier_form ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                  >{{ $t(!supplier_form ? "展开报告" : "收起报告") }}</el-button
                >
              </div>
            </div>
          </div>
        </div>

        <div class="border pd-16 mt-8">
          <div class="ptitle">
            {{ $t("供应商转正资料") }}
          </div>
          <div class="learun-form-title mt-16">
            {{ $t("转正说明") }}
          </div>
          <div class="form_block">
            {{ formData.f_Description }}
          </div>
          <div class="learun-form-title mt-16">
            {{ $t("附件上传") }}
          </div>
          <div class="form_block">
            <l-upload
              drag
              maxSize="10"
              sizeType="MB"
              :limit="3"
              showFileList="uploadTheme1"
              disabled
              v-model="formData.f_File"
            />
          </div>
          <div class="learun-form-title mt-16 mb-16">
            {{ $t("流程审批") }}
          </div>
          <l-wf-audit-timeline
            v-if="!loading"
            isLoadData
            :processId="formData.f_Id"
          />
        </div>
        <div class="border pd-16 mt-8">
          <div class="ptitle">
            {{ $t("供应商时间轴") }}
          </div>
          <div class="erp-supplier-timeline">
            <el-timeline>
              <el-timeline-item
                type="primary"
                :timestamp="lr_dateFormat(item.f_CreateDate)"
                :key="item.f_Id"
                v-for="item in timeList"
              >
                <div class="title">
                  {{ item.f_Title }}
                </div>
                <div class="user">
                  {{ item.f_ContentUser }}
                </div>
               
                <template v-if="item.f_ContentReason.indexOf('delete') > -1" >
                  <div class="user">
                    {{$t('淘汰原因')}}：{{ outMap[item.f_ContentReason.replace('delete','')] }}
                  </div>
                  <div class="user">
                    {{$t('淘汰说明')}}：{{ item.f_ContentExplain }}
                  </div>
                </template>
                <template v-else-if="item.f_ContentReason.indexOf('recover') > -1" >
                  <div class="user">
                     {{$t('恢复说明')}}：{{ item.f_ContentExplain }}
                  </div>
                  <l-upload
                      class="mt-8"
                      v-if="item.f_ContentReason.replace('recover','') != ''"
                      drag
                      maxSize="10"
                      sizeType="MB"
                      :limit="3"
                      showFileList="uploadTheme1"
                      disabled
                      :value="item.f_ContentReason.replace('recover','')"
                    />
                </template>

                <el-button @click="lookYear(item.f_ContentReason)" v-if="item.f_ContentExplain == 'yearAssess'" type="text">
                  {{ $t('查看年审报告') }}
                </el-button>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </el-row>

    <wf-audit-form
      ref="form"
      type="auditAndlook"
      :params="{ processId: yearId }"
      :isLoadFormData="true"
      title="供应商年审报告"
      :visible.sync="wfvisible"
    />
  </div>
</template>
<script>
import AssessForm from "../supplier/assessForm";
const api = window.$api.erpcase.supplier;
export default {
  props: {
    id: String,
  },
  components: {
    AssessForm,
  },
  data() {
    return {
      supplierInfo: {
        f_Number: "",
        f_Name: "",
        f_Person: "",
        f_Phone: "",
        f_Scope: "",
        f_CreateDate: "",
        f_CreateUserName: "",
        f_Type: "",
      },
      supplier_form: false,

      formData: {
        f_Description: "", // 转正备注
        f_File: "", // 附件
      },

      loading: true,
      timeList: [],

      yearId:'',
      wfvisible:false,

      outMap:{
        '1':'年审不合格',
        '2':'其他'
      }
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.loadSupplierInfo(this.id);
    },
    // 加载供应商信息
    async loadSupplierInfo(id) {
      this.loading = true;
      const supplierInfo = await this.$awaitWraper(api.get(id));
      if (supplierInfo) {
        supplierInfo.f_CreateDate = this.$formatDate(
          supplierInfo.f_CreateDate,
          "yyyy-MM-dd"
        );
        this.supplierInfo = supplierInfo;
      }

      this.formData = await this.$awaitWraper(api.getFormalBySupplier(id));

      // 获取时间轴信息
      this.timeList = await this.$awaitWraper(api.getTimeList(id));

      this.loading = false;

      console.log(this.timeList, "timeList");
    },

    lookYear(id){
      this.yearId = id;
      this.wfvisible = true;
    },

    // Reset表单
    resetForm() {
      this.$formClear(this.$refs.form);
    },
    //  展开
    async showLookForm() {
      this.supplier_form = !this.supplier_form;
    },
  },
};
</script>
<style lang="scss" scoped>
.erp-supplier-timeline {
  .title {
    font-size: 14px;
    color: #666;
  }
  .user {
    font-size: 14px;
    color: #999;
  }
}
</style>